import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import Alert from 'src/component/Alert';
import Button from 'src/component/Button';
import Form from 'src/component/Form';
import FormInput from 'src/component/FormInput';
import Modal from 'src/component/Modal';
import { Severity } from 'src/constant/Notification';
// import { TwoStepVerificationForm } from 'src/model/Form';
import { openSnackbar } from 'src/redux/uiSlice';
import { GoogleVerify } from 'src/service/userService';
import style from './DisableTfaModal.module.scss';

type TwoStepVerificationForm = {
    code: string
}

type Props = {
    open: boolean;
    handleClose: () => void;
};

const DisableTfaModal = ({ open, handleClose }: Props) => {
    const dispatch = useDispatch();
    const methods = useForm<TwoStepVerificationForm>();

    const onSubmit = (data: TwoStepVerificationForm) => {
        handleClose();
        methods.reset();
        const uMail = localStorage.getItem("uMail")
        const token = localStorage.getItem("token")
        const gState = "停用"
        GoogleVerify({
            uMail: uMail,
            gCode: data.code,
            gState: gState,
            token: token,
        }).then((res) => {
            if (res.success) {
                dispatch(openSnackbar({ message: '二步骤验证已停用', severity: 'notify' }));
            } else {
                dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
            }
        }).catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    };

    return (
        <Modal open={open} handleClose={handleClose}>
            <Form methods={methods} onSubmit={onSubmit} className={style.form}>
                <div className={style.heading}>停用二步骤验证</div>
                <div className={style.verificationCode}>
                    <FormInput name="code" label="二步骤验证码" autoFocus />
                </div>
                <Alert severity={Severity.Clear} className={style.alert}>
                    若你无法取得二步骤验证码，请与客服联繫。
                </Alert>
                <div className={style.navigator}>
                    <Button appearance="outlined" type="button" onClick={handleClose}>
                        取消
                    </Button>
                    <Button type="submit" className={style.submitButton}>
                        停用二步骤验证
                    </Button>
                </div>
            </Form>
        </Modal>
    );
};

export default DisableTfaModal;
